import { useRef, useState } from "react";
import React, { Button, StyleSheet, View, Text } from 'react-native';
import {TestSuite, TestCase, Tester} from '@rnoh/testerino';
import {CameraApi, CameraType, Camera} from 'react-native-camera-kit';

export const ScanBoxSizeTest = () => {
  const cameraRef = useRef<CameraApi>(null);
  const [currentSize, setCurrentSize] = useState('中');
  const [boxSize, setBoxSize] = useState({ width: 200, height: 200 });

  const boxSizes = {
    '小': { width: 150, height: 150 },
    '中': { width: 200, height: 200 },
    '大': { width: 300, height: 300 },
  };

  const changeBoxSize = (sizeKey: keyof typeof boxSizes) => {
    setBoxSize(boxSizes[sizeKey]);
    setCurrentSize(sizeKey);
  };

  return (
    <Tester>
      <TestSuite name="扫码框尺寸测试">
        <TestCase itShould="支持动态调整扫码框尺寸">
          <View>
            <Text style={styles.sizeText}>当前扫码框尺寸: {currentSize}</Text>
            <Text style={styles.sizeText}>宽度: {typeof boxSize.width === 'number' ? boxSize.width + 'px' : boxSize.width}</Text>
            <Text style={styles.sizeText}>高度: {typeof boxSize.height === 'number' ? boxSize.height + 'px' : boxSize.height}</Text>
          </View>
          
          <Camera
            ref={cameraRef}
            style={styles.cameraPreview}
            cameraType={CameraType.Back}
            scanBarcode
            showFrame
            laserColor="red"
            frameColor="white"
            barcodeFrameSize={boxSize}
            onReadCode={(event) => {
              console.log('扫描结果:', event.nativeEvent.codeStringValue);
            }}
          />
          
          <View style={styles.actionBtn}>
            <Button
              title="小尺寸"
              onPress={() => changeBoxSize('小')}
            />
            <Button
              title="中尺寸"
              onPress={() => changeBoxSize('中')}
            />
            <Button
              title="大尺寸"
              onPress={() => changeBoxSize('大')}
            />
          </View>
        </TestCase>
      </TestSuite>
    </Tester>
  );
};

const styles = StyleSheet.create({
  view: { flex: 1 },
  cameraPreview: {
    width: '100%',
    aspectRatio: 3 / 4,
  },
  actionBtn: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    padding: 10,
    backgroundColor: '#000',
  },
  sizeText: {
    fontSize: 16,
    padding: 5,
    textAlign: 'center',
    color: '#000',
  },
});